<template>
  <v-dialog v-model="dialog.visible" fullscreen hide-overlay transition="dialog-bottom-transition">
    <v-card>
      <v-toolbar dark color="primary">
        <v-btn icon dark @click="dialog.visible=false">
          <v-icon>close</v-icon>
        </v-btn>
        <v-toolbar-title>{{dialog.title}}</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items v-if="dialog.data.id!==''">
          <v-btn dark flat @click="checkForm">保存</v-btn>
        </v-toolbar-items>
        <v-toolbar-items v-else>
          <v-btn dark flat @click="checkForm">新建</v-btn>
        </v-toolbar-items>
      </v-toolbar>
      <v-card-text>
        <v-container class="pb-0" grid-list-md>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-layout wrap align-center>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-select :items="[{id:0,name:'文章'},{id:1,name:'视频'}]" item-text="name" item-value="id" label="类型" v-model="dialog.type" search-input></v-select>
              </v-flex>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-select :items="[{id:0,name:'知识视窗'},{id:1,name:'校园体育'}]" item-text="name" item-value="id" label="文章类型" v-model="dialog.data.type" search-input></v-select>
              </v-flex>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-text-field :rules="rule.title" label="文章标题" v-model="dialog.data.title" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-textarea :rules="rule.description" label="文章描述" v-model="dialog.data.description" auto-grow :rows="1"></v-textarea>
              </v-flex>
              <v-container class="pl-0 pr-0 pt-0 pb-0" grid-list-md v-show="dialog.type===0">
                <v-layout wrap align-center>
                  <uploader class="ml-1" base="article/" ref="picUploader" refs="picUploader" title="封面上传" :max="1" :pic="true">
                    <template slot-scope="props">
                      <div class="upload-list">
                        <v-img :src="props.url" aspect-ratio="1" class="grey lighten-2" contain/>
                        <div style="flex-direction: column;" class="upload-list-hover d-flex" v-if="props.tool">
                          <div class="d-flex justify-space-between mt-3">
                            <v-icon class="font-white" @click="$refs[props.refs].left(props.index)">arrow_left</v-icon>
                            <v-icon class="font-white" @click="$refs[props.refs].right(props.index)">arrow_right</v-icon>
                          </div>
                          <div class="d-flex justify-space-between">
                            <v-icon class="font-white" @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                            <v-icon class="font-white" @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                          </div>
                        </div>
                        <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                          <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                        </div>
                      </div>
                    </template>
                    <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                      <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                    </div>
                  </uploader>
                  <v-flex xs12>
                    <editor :plugins="[]" :content="dialog.data.content" @content="updateContent"></editor>
                  </v-flex>
                </v-layout>
              </v-container>
              <v-container class="pl-0 pr-0 pt-0 pb-0" grid-list-md v-show="dialog.type===1">
                <v-layout wrap align-center>
                  <v-flex xs12 v-if="dialog.type===1">
                    <v-textarea :rules="rule.videoContent" label="视频内容" v-model="dialog.data.videoContent" auto-grow :rows="1"></v-textarea>
                  </v-flex>
                  <uploader class="ml-1" base="article/" ref="videoUploader" refs="videoUploader" title="视频上传" :max="1" :video="true">
                    <template slot-scope="props">
                      <div class="upload-list show-overflow">
                        <video ref="video" :src="props.url" controls="controls"/>
                        <div class="d-inline-block">
                          <v-icon @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                          <v-icon @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                        </div>
                        <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                          <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                        </div>
                      </div>
                    </template>
                    <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                      <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                    </div>
                  </uploader>
                </v-layout>
              </v-container>
            </v-layout>
          </v-form>
        </v-container>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import uploader from '../../components/Uploader'
import editor from '../../components/Editor'
import 'tinymce/themes/mobile/theme'
import { Error } from '../../utils/error'
import { postArticle, putArticle } from '../../api/article'
import { getObject } from '../../api/oss'
export default {
  name: 'Dialog',
  components: {
    uploader,
    editor
  },
  data: () => ({
    dialog: {
      visible: false,
      title: '',
      data: {
        id: '',
        title: '',
        type: 0,
        description: '',
        content: '',
        videoContent: ''
      },
      type: 0
    },
    valid: true,
    rule: {
      title: [v => !!v || '文章标题必须填写', v => (v && v.length <= 255) || '文章标题必须小于255个字符'],
      description: [v => !!v || '文章描述必须填写', v => (v && v.length <= 255) || '文章描述必须小于255个字符'],
      videoContent: [v => !!v || '视频内容必须填写']
    }
  }),
  methods: {
    show (title) {
      this.dialog.title = title
      this.dialog.visible = true
    },
    get (data) {
      this.dialog.data = data
      if (data.videoKey.length === 0) {
        this.dialog.type = 0
        this.$refs.picUploader.fileList = []
        this.$refs.picUploader.fileList.push({
          src: data.thumbnailUrl,
          toolVisible: false,
          progressVisible: false,
          progress: 0
        })
        this.$refs.videoUploader.fileList = []
      } else {
        this.dialog.type = 1
        this.dialog.data.videoContent = this.dialog.data.content
        this.dialog.data.content = ''
        this.$refs.picUploader.fileList = []
        getObject(data.videoKey).then((res) => {
          this.$refs.videoUploader.fileList = []
          this.$refs.videoUploader.fileList.push({
            src: res.data.signedUrl,
            toolVisible: false,
            progressVisible: false,
            progress: 0
          })
        })
      }
    },
    clear () {
      this.dialog.data = {
        id: '',
        title: '',
        type: 0,
        description: '',
        content: '',
        videoContent: ''
      }
      this.dialog.type = 0
      this.$nextTick(function () {
        this.$refs.picUploader.fileList = []
      })
    },
    updateContent (data) {
      this.dialog.data.content = data
    },
    checkForm () {
      if (this.dialog.type === 0) {
        if (this.$refs.form.validate()) {
          if (this.$refs.picUploader.fileList.length === 0 || this.$refs.picUploader.fileList[0].src.length === 0) {
            Error(5000, '未上传图片')
          } else if (this.dialog.data.content.length === 0) {
            Error(5000, '内容不能为空')
          } else if (this.dialog.data.id !== '') {
            let data = {
              id: this.dialog.data.id,
              title: this.dialog.data.title,
              type: this.dialog.data.type,
              description: this.dialog.data.description,
              content: this.dialog.data.content,
              thumbnailUrl: this.$refs.picUploader.fileList[0].src,
              videoKey: ''
            }
            postArticle(data).then((res) => {
              this.$emit('update')
              this.dialog.visible = false
            })
          } else {
            let data = {
              title: this.dialog.data.title,
              type: this.dialog.data.type,
              description: this.dialog.data.description,
              content: this.dialog.data.content,
              thumbnailUrl: this.$refs.picUploader.fileList[0].src,
              videoKey: ''
            }
            putArticle(data).then((res) => {
              this.$emit('update')
              this.dialog.visible = false
            })
          }
        }
      } else {
        if (this.$refs.form.validate()) {
          if (this.$refs.videoUploader.fileList.length === 0 || this.$refs.videoUploader.fileList[0].src.length === 0) {
            Error(5000, '未上传视频')
          } else if (this.dialog.data.videoContent.length === 0) {
            Error(5000, '视频内容不能为空')
          } else if (this.dialog.data.id !== '') {
            let videoKey = unescape(this.$refs.videoUploader.fileList[0].src.substring(this.$refs.videoUploader.fileList[0].src.indexOf('.com/') + 5, this.$refs.videoUploader.fileList[0].src.indexOf('?')))
            let data = {
              id: this.dialog.data.id,
              title: this.dialog.data.title,
              type: this.dialog.data.type,
              description: this.dialog.data.description,
              content: this.dialog.data.videoContent,
              thumbnailUrl: '',
              videoKey: videoKey
            }
            postArticle(data).then((res) => {
              this.$emit('update')
              this.dialog.visible = false
            })
          } else {
            let videoKey = unescape(this.$refs.videoUploader.fileList[0].src.substring(this.$refs.videoUploader.fileList[0].src.indexOf('.com/') + 5, this.$refs.videoUploader.fileList[0].src.indexOf('?')))
            let data = {
              title: this.dialog.data.title,
              type: this.dialog.data.type,
              description: this.dialog.data.description,
              content: this.dialog.data.videoContent,
              thumbnailUrl: '',
              videoKey: videoKey
            }
            putArticle(data).then((res) => {
              this.$emit('update')
              this.dialog.visible = false
            })
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
